Gadgets de imágenes para enlaces.

Ariane de Templates Novo Blogger tiene un gusto exquisito para diseñar plantillas, por si eso fuera poco también tiene la amabilidad de explicar como podemos conseguir los mismos trucos o efectos que ella aplica en sus plantillas.

Hace unos días nos mostraba la forma de usar gadgets de imágenes para enlazar entradas del blog, aunque también podemos crear enlaces externos consiguiendo un atractivo y funcional menú. Ejemplo de Ariane.

Para los ejemplos se ha utilizado la plantilla Minima de Blogger si nuestra plantilla es distinta se recomienda hacer la prueba en otro blog para evitar posibles errores.

Lo primero que haremos será habilitar el croscoll para añadir nuevos gadgets, buscamos en plantilla Edición de HTML.

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
» Donde dice no lo sustituimos por yes

Luego buscamos #outer-wrapper y sustituimos el ancho (width) por 900px.
#outer-wrapper {
width: 900px;

Una vez dimos la anchura suficiente nos situamos justo antes de ]]></b:skin> para añadir los estilos de los nuevos gadgets de imágenes.

#crosscol-wrapper{

margin: 0 auto;

padding: 15px;

float:left;

border:1px solid #2e2e2e; /* color y grosor del borde que rodea el contenido del gadget */

background: #111; /* color de fondo del contenido del gadget*/

}

.crosscol h2{

margin: 0px;

padding: 0px 0px 0px;

text-align:left; /* alineación del título */

height: 25px; /*altura del espacio título */

color: #ccc; /* color de fuente del título */

font-size: 18px; /*tamaño de fuente del título */

font-weight:bold;

text-transform:uppercase;

letter-spacing:-1px;

}

.crosscol .widget{

margin: 0px 2px 0px; /*separación entre los gadgets */

padding: 5px;

width: 200px; /*ancho de cada gadget */

height:220px; /* alto de cada gadget */

float:left; /* flotación a la izquierda (importante)*/

border: 1px solid #2e2e2e; /*color borde de cada gadget*/

background: #212121; /* color fondo de cada gadget */

}

.crosscol .widget img {

margin: 0px;

padding: 0px;

width: 200px; /* ancho de la imagen */

height:160px; /* alto de la imagen */

float:left;

border:1px solid #2e2e2e; /* color borde de imágenes */

}

.crosscol .widget img:hover{

border:1px solid #fa01e6; /* color borde en estado hover */

}

.crosscol .widget-content{

margin: 0px;

padding:3px 0 0; /* distancia entre el texto y la imagen */

color:#ccc; /* color de fuente del texto */

font-size: 97%; /* tamaño fuente del texto*/

text-align:justify; /* alineación del texto */

}

body#layout #crosscol{

margin: 0 auto;

padding: 0 0 0;

width: 900px;

float:left;

}

El siguiente paso será editar un nuevo gadget en el espacio que habilitamos para el crosscol, escogeremos para añadir imagen.

» Donde Título añadiremos el título de nuestro gadget.
» En Pie de foto es el sitio donde añadiremos texto o breve descripción.
» El espacio de Enlace lo utilizaremos para añadir la url del sitio donde seremos dirigidos al clicar sobre la imagen, puede ser una entrada en concreto o cualquier sitio externo.
» El mismo proceso lo repetimos hasta añadir cuatro imágenes.

Guardamos los cambios para no perderlos y esta vez si vamos a marcar para expandir la plantilla de artilugios y buscamos:

<b:section class='crosscol' id='crosscol' showaddelement='yes'>

"A continuación encontraremos 4 veces el siguiente código"

<b:widget id='Image4' locked='false' title='Ejemplo 4' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != &quot;&quot;'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

» Los cuatro códigos pertenecen a los cuatro gadgets añadidos, uno por cada imagen.
» En lugar de title='Ejemplo 4' pondría title='título de tu gadget'

Modificaremos cada una de esas cuatro partes de forma que eliminamos lo marcado en color rojo y añadimos lo marcado en color verde.

<b:widget id='Image4' locked='false'title='título de tu gadget' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<a expr:href='data:link'>
<h2><data:title/></h2>
</a>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != &quot;&quot;'>
<a expr:href='data:link'>
<span class='caption'><data:caption/></span>
</a>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

El resultado de seguir estos pasos podéis verlo haciendo click en la imagen.